import {Component, Input, Output, EventEmitter} from '@angular/core';
import {NoticeItem} from './interface';
import {Router} from '@angular/router';
import {Events} from "@core/services/events/Events";

@Component({
  selector: 'notice-icon-tab',
  template: `
    <div *ngIf="data.list?.length === 0; else listTpl" class="not-found">
      <img *ngIf="data.emptyImage" src="{{data.emptyImage}}" alt="not found"/>
      <p>{{data.emptyText || '无通知'}}</p>
    </div>
    <ng-template #listTpl>
      <apes-list [apesDataSource]="data.list" [apesRenderItem]="item">
        <ng-template #item let-item>
          <apes-list-item (click)="onClick(item)" [ngClass]="{'read': item.read}">
            <apes-list-item-meta
              [apesTitle]="apesTitle"
              [apesDescription]="apesDescription"
              [apesAvatar]="item.avatar">
              <ng-template #apesTitle>
                {{item.title}}
                <div class="extra" *ngIf="item.extra">
                  <apes-tag [apesColor]="item.color">{{item.extra}}</apes-tag>
                </div>
              </ng-template>
              <ng-template #apesDescription>
                <div *ngIf="item.description" class="description">{{item.description}}</div>
                <div *ngIf="item.datetime" class="datetime">{{item.datetime}}</div>
              </ng-template>
            </apes-list-item-meta>
          </apes-list-item>
        </ng-template>
      </apes-list>
      <div class="clear" (click)="onClear()">{{ data.clearText || '清空' }}</div>
    </ng-template>
  `,
  preserveWhitespaces: false,
})
export class NoticeIconTabComponent {
  @Input() data: NoticeItem;
  @Output() select = new EventEmitter<any>();
  @Output() clear = new EventEmitter<string>();

  constructor(private router: Router, protected events: Events) {

  }

  onClick(item: NoticeItem) {
    this.select.emit({
      title: this.data.title,
      item,
    });
    let url = 'form/purch.order';
    this.router.navigateByUrl(url).then(result => {
        if (result !== true) {
          this.events.publish(url, '14001180626000763');
        } else {
          // this.events.subscribe('form.ready', data => {
          //   if(url === data){
          //     this.events.publish(url, '14001180626000762');
          //   }
          // });
           this.events.publish(url, '14001180626000762');
        }
      }
    );
  }

  onClear() {
    this.clear.emit(this.data.title);
  }
}
